<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: '',
  data() {
    return {
      scroll: null
    }
  },
  mounted() {

    setTimeout(this.init, 20)
  },
  methods: {
    init() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,//是否可以点击
        probeType: 3, //滚动事件
        observeImage: true, //加载图片
        observeDOM: true,
        stopPropagation: true,
        pullUpLoad: true, //上拉加载
        pullDownRefresh: true, //下拉刷新
      })

      // 滚动事件:
      this.scroll.on('scroll', (position) => {
        this.$emit('scroll', position)
      })

      // 上拉加载事件
      this.scroll.on('pullingUp', () => {

        this.$emit('pullingUp')
      })
      // 下拉加载事件
      this.scroll.on('pullingDown', () => {
        this.$emit('pullingDown')
      })

    },
    refresh() {
      return this.scroll && this.scroll.refresh && this.scroll.refresh()
    },
    scrollTo(x, y, time = 0) {
      return this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time)
    },
    // 结束上拉加载
    finishPullUp() {

      return this.scroll && this.scroll.finishPullUp && this.scroll.finishPullUp()
    },
    // 结束下拉加载
    finishPullDown() {
      return this.scroll && this.scroll.finishPullDown && this.scroll.finishPullDown()
    },

  }
}
</script>
<style scoped>
.wrapper {
  overflow: hidden;
}
</style>
